import React, { useMemo, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Modal, useModal } from 'choerodon-ui/pro';
import { HeaderButtons } from '@choerodon/master';
import { get } from '@choerodon/inject';
import EnvCreateForm from '../../modals/env-create';
import { useEnvironmentStore } from '../../../stores';

const EmptyPageEnv = observer((props) => {
  const envKey = Modal.key();
  const modalStyle = useMemo(() => ({
    width: 380,
  }), []);
  const {
    intlPrefix: currentIntlPrefix,
    intl: { formatMessage },
    treeDs,
    envStore,
  } = useEnvironmentStore();
  const { setFlag } = props;
  const refresh = () => {
    setFlag(1);
    treeDs.query();
  };
  function openEnvModal() {
    Modal.open({
      key: envKey,
      title: formatMessage({ id: `${currentIntlPrefix}.create` }),
      // eslint-disable-next-line max-len
      children: <EnvCreateForm intlPrefix={currentIntlPrefix} treeDsData={treeDs} refresh={refresh} />,
      drawer: true,
      style: modalStyle,
      okText: formatMessage({ id: 'boot.create' }),
    });
  }

  function getButtons() {
    return [
      {
        permissions: ['choerodon.code.project.deploy.environment.ps.detail-create-env'],
        name: formatMessage({ id: 'c7ncd.environment.CreateEnvironment' }),
        icon: 'playlist_add',
        handler: openEnvModal,
        display: true,
        group: 1,
        // disabled: createEnvBtnDisable,
        // tooltipsConfig,
      },
    ];
  }

  return <HeaderButtons items={getButtons()} showClassName />;
});

export default EmptyPageEnv;
